{extend name='admin@main'}
{block name="content"}
<div class="think-box-shadow">
    {include file='goodsweek/index_search'}
    <div class="layui_table_width_scroll">
        <table class="layui-table margin-top-10"  lay-skin="line" >
            {notempty name='data_arr'}
            <thead>
            <tr>
                <th class="text-center">日期</th>
                <th class='text-left'>周活跃用户</th>
                <th class='text-left'>周新增用户</th>
                <th class='text-left'>周付费金额</th>
                <th class='text-left'>周付费用户</th>
                <th class='text-left'>周付费次数</th>
                <th class='text-left'>周新增用户付费金额</th>
                <th class='text-left'>周新增用户付费用户</th>
                <th class='text-left'>周新增用户付费次数</th>
            </tr>
            </thead>
            {/notempty}
            <tbody>
                <tr>
                    <th class='text-center'> {$start_time}</th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'dayactivity')); ?></th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'dru')); ?></th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'allmoney')); ?></th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'rechange_num')); ?></th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'order_num')); ?></th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'addrechrge_amount')); ?></th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'addrechrge_number')); ?></th>
                    <th class='text-left nowrap'><?php echo array_sum(array_column($data_arr,'add_order_num')); ?></th>
                </tr>
            </tbody>
        </table>
    </div>
    {empty name='data_arr'}<span class="notdata">没有记录哦</span>{/empty}
</div>
<div class="think-box-shadow store-total-container notselect" >
    <div class="layui-row layui-col-space15" >
        <div class="margin-bottom-15">充值线图 </div>
        <div id="games_user_recharge" style="height:350px;width:100%;" >
        </div>
    </div>
</div>
<div class="think-box-shadow store-total-container notselect" >
    <div class="layui-row layui-col-space15" >
        <div class="margin-bottom-15">新增用户线图 </div>
        <div id="games_user_dru" style="height:350px;width:100%;" >
        </div>
    </div>
</div>
<div class="think-box-shadow store-total-container notselect" >
    <div class="layui-row layui-col-space15" >
        <div class="margin-bottom-15">活跃用户线图</div>
        <div id="games_user_dayactivity" style="height:350px;width:100%;" >
        </div>
    </div>
</div>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('games_user_recharge'));
        window.onresize = chart.resize;
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['充值线图']
            },
            toolbox: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data :eval('{:json_encode($user_recharge_remain.time)}')
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        color: '#2f9de2',
                        formatter: "{value}元"
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#cccccc'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'充值线图',
                    type:'line',
                    stack: '总量',
                    data: eval('{:json_encode($user_recharge_remain.allmoney)}'),
                    lineStyle: {
                        normal: {
                            color: '#e23845',
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            borderColor: '#55ffd1',
                        }
                    }
                },
            ]
        };
        chart.setOption(option);
    });
</script>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('games_user_dru'));
        window.onresize = chart.resize;
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['新增用户线图']
            },
            toolbox: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data :eval('{:json_encode($user_dru_remain.time)}')
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        color: '#2f9de2',
                        formatter: "{value}人"
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#cccccc'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'新增用户线图',
                    type:'line',
                    stack: '总量',
                    data: eval('{:json_encode($user_dru_remain.dru)}'),
                    lineStyle: {
                        normal: {
                            color: '#2f9de2',
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            borderColor: '#ff7d7d',
                        }
                    }
                },
            ]
        };
        chart.setOption(option);
    });
</script>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('games_user_dayactivity'));
        window.onresize = chart.resize;
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['活跃用户线图']
            },
            toolbox: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data :eval('{:json_encode($user_dayactivity_remain.time)}')
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        color: '#2f9de2',
                        formatter: "{value}人"
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#cccccc'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'活跃用户线图',
                    type:'line',
                    stack: '总量',
                    data: eval('{:json_encode($user_dayactivity_remain.dayactivity)}'),
                    lineStyle: {
                        normal: {
                            color: '#b938e2',
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            borderColor: '#ffa427',
                        }
                    }
                },
            ]
        };
        chart.setOption(option);
    });
</script>
{/block}
